<!DOCTYPE html>
<html>

<head>
  <!-- USE DEVELOPMENT VERSION -->
  <script src="./konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Konva Transform 事件 强制更新</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <input type="button" id="button" value="添加随机形状" />
  <hr>
  <div id="container"></div>
  <script>
    var width = window.innerWidth
    var height = window.innerHeight

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    })

    var layer = new Konva.Layer()
    stage.add(layer)

    var group = new Konva.Group({
      x: 50,
      y: 50,
      draggable: true
    })
    layer.add(group)

    // create new transformer
    var tr = new Konva.Transformer()
    layer.add(tr)
    tr.attachTo(group)
    layer.draw()

    document.getElementById('button').addEventListener('click', addShape)


    addShape()

    function addShape () {
      group.add(
        new Konva.Circle({
          x: Math.random() * 100,
          y: Math.random() * 100,
          radius: Math.random() * 100,
          fill: Konva.Util.getRandomColor(),
          stroke: 'black',
          strokeWidth: Math.random() * 10
        })
      )
      // 强制更新
      tr.forceUpdate()
      layer.draw()
    }
  </script>
</body>

</html>